<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>

<body>
    
    <form action="http://baidu.com" target="_blank" novalidate>
        <label for="">用户名：</label>
        <input type="text" style="height: 50px;" placeholder="请输入用户名" /><br>
        <input type="text" value="王尼玛" /><br>
        <input type="text" maxlength="5"><br>
        <input type="text" readonly value="然盲听"><br>
        <input type="text" placeholder="我会自动聚焦" autofocus><br>
        <input type="text" disabled value="刘磊">

        <!-- <input type="text" pattern="\d"> -->
        <input type="text" required>
        <br>
        <label for="pwd">密码：</label>
        <input type="password" id="pwd">
        <div>
            <!-- 通过给input同一个name让其成为一组 -->
            <label for="">性别：</label>
            <label for="male">男</label>
            <input type="radio" name="gender" id="male" checked>
            <label for="female">女</label>
            <input type="radio" name="gender" id="female">
            <label for="secret">秘密</label>
            <input type="radio" name="gender" id="secret">
        </div>
        <div>
            <label for="">爱好：</label>
            <label for="">打游戏</label>
            <input type="checkbox" name="hobby" checked>
            <label for="">看美女</label>
            <input type="checkbox" name="hobby" checked>
            <label for="">看电影</label>
            <input type="checkbox" name="hobby">
            
        </div>
        <div>
            <label for="">上传靓照</label>
            <input type="file">
        </div>
        <!-- form里面的button默认会作为提交按钮 -->
        <button>提交 button按钮</button>
        <!-- 表单提交按钮 -->
        <input type="submit" value="自定义submit文字">
        <!-- 普通按钮 -->
        <input type="button" value="普通按钮">
        <br>
        <label for="">email</label>
        <input type="email" required>
        <!-- 重置该元素所在的form里面的所有内容 -->
        <input type="reset" >
        <br>
        <label for="">hidden</label>
        <input type="hidden" value="qw123">
        <input type="image" src="./img/1.png"><br>
        <input type="search"><br>
        <label for="">number</label>
        <input type="number" step="5" max="10" min="-10">
        <br>
        <input type="month"><br>
        <input type="color">
    </form>
    <hr>
    <form action="">
        <input type="text">
    </form>
    <button>普通按钮</button>
</body>

</html>